<template>
  <div class="todo_footer">
    <!-- 底部区域 -->
    <footer class="footer">
      <span class="todo-count"
        ><strong>{{ Active }}</strong> item left</span
      >
      <ul class="filters" @click="toggle">
        <li>
          <a :class="{ selected: active === 0 }" @click="active = 0" href="#/"
            >All</a
          >
        </li>
        <li>
          <a
            href="#/active"
            :class="{ selected: active === 1 }"
            @click="active = 1"
            >Active</a
          >
        </li>
        <li>
          <a
            href="#/completed"
            :class="{ selected: active === 2 }"
            @click="active = 2"
            >Completed</a
          >
        </li>
      </ul>
      <button class="clear-completed" v-show="isShow" @click="clear">Clear completed</button>
    </footer>
  </div>
</template>

<script>
export default {
  props: {
    todoList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    Active() {
      return this.todoList.filter(({done}) => done===false).length
    },
    isShow() {
      return this.todoList.some(({done}) => done)
    }
  },
  methods : {
    clear() {
      this.$emit('clear')
    },
    // 切换
    toggle() {
      this.$emit('toggle',this.active)
    }
  }
};
</script>

<style>
</style>